<template>
  <div class="progress-bar">
    <div class="ctime">{{ ctime }}</div>
    <div class="progress-bar-box">
      <div class="bg">
        <div class="current-playback-progress current-playback-progress1"></div>
      </div>

    </div>
    <div class="etime">{{ etime }}</div>
  </div>
</template>


<script setup>
import {computed, onMounted, watch} from "vue";
import store from "../store/index.js";

const ctime = computed(() => timeProcess(store.state.song.ctime));  // 当前秒数
const etime = computed(() => timeProcess(store.state.song.etime));  // 全部秒数
// const scetime = computed(() => (parseInt(time / 60) >= 10 ? time : '0' + time) + ':' + (ctime % 60 >= 10 ? ctime % 60 : '0' + ctime % 60))
// console.log(etime)
// 时间格式处理函数
const timeProcess = (time) => {
  // 秒数
  let second = time % 60;
  // 分数
  let minutes = parseInt(time / 60);
  let timeOut = (minutes >= 10 ? minutes : '0' + minutes) + ':' + (second >= 10 ? second : '0' + second);
  return timeOut;
}
// 进度条拖动时当前秒数
let currentTime;
// 进度条元素
let progressBarBox;
// 当前播放进度条元素
let currentPlaybackProgress;
// 进度条是否处于点击状态
let isClick = false;
onMounted(() => {
  // // 当前秒数
  // let currentTime = 0;
  // 进度条元素
  progressBarBox = document.querySelector('.progress-bar-box');
  // 当前播放进度条元素
  currentPlaybackProgress = document.querySelector('.current-playback-progress');
  progressBarBox.ontouchstart = (e) => {
    isClick = true;
    currentPlaybackProgress.setAttribute('class', 'current-playback-progress current-playback-progress2');
    currentPlaybackProgress.style.width = e.changedTouches[0].clientX - e.target.offsetLeft + 'px'
    // 当前秒数
    currentTime = Math.round(parseFloat(currentPlaybackProgress.style.width) / (e.target.offsetWidth / store.state.song.etime));
    // 重新设置当前播放时间
    store.commit("SETCTIME", currentTime);


    // console.log(e.target.offsetLeft);
    progressBarBox.ontouchmove = (e) => {
      if (e.changedTouches[0].clientX <= e.target.offsetLeft) {
        console.log(0);
        currentPlaybackProgress.style.width = 0;
      } else if (e.changedTouches[0].clientX - e.target.offsetLeft >= e.target.offsetWidth) {
        console.log(246);
        currentPlaybackProgress.style.width = e.target.offsetWidth + 'px'
      } else {
        currentPlaybackProgress.style.width = e.changedTouches[0].clientX - e.target.offsetLeft + 'px'
      }
      // 当前秒数
      currentTime = Math.round(parseFloat(currentPlaybackProgress.style.width) / (e.target.offsetWidth / store.state.song.etime));
      // 重新设置当前播放时间
      store.commit("SETCTIME", currentTime);
      // console.log(Math.round(parseFloat(currentPlaybackProgress.style.width) / (e.target.offsetWidth / 240))); // 进度条宽度
      // 当前秒数
      // currentSecond = Math.round(parseFloat(currentPlaybackProgress.style.width) / (e.target.offsetWidth / store.state.song.etime));
      // console.log(parseInt(currentPlaybackProgress.style.width) / 240);
    }
  }
  progressBarBox.ontouchend = () => {
    isClick = false;
    audio.currentTime = currentTime;
    currentPlaybackProgress.setAttribute('class', 'current-playback-progress current-playback-progress1');
  }
})
const songUrl = computed(() => store.state.index.songUrl);
// 监听歌曲改变，进度条归零
watch(songUrl, () => {
  // console.log(songUrl)
  // console.log(store.state.song)
  // let currentPlaybackProgress = document.querySelector('.current-playback-progress');
  currentPlaybackProgress.style.width = 0
})
// 监听时间变化改变进度条宽度
watch(ctime, () => {
  // 不在点击状态下可以改变宽度
  if (!isClick) {
    currentPlaybackProgress.style.width = Math.round(progressBarBox.clientWidth * store.state.song.ctime / store.state.song.etime) + 'px';
  }
})
</script>


<style scoped lang="scss">
.progress-bar {
  /* margin: 300px auto; */
  width: 100vw;
  display: flex;
  align-items: center;
}

.progress-bar-box {
  flex: 1;
  /* width: 100%; */
  /* height: 1px; */
  margin: 0 10px;
  /* background: #000; */
  padding: 5px 0;
}


.bg {
  position: relative;
  z-index: -1;
  content: ' ';
  width: 100%;
  height: 1px;
  display: block;
  background: #000;
}

.current-playback-progress {
  position: relative;
  width: 0px;
  height: 1px;
  background: red;
}

.current-playback-progress1:after {
  content: ' ';
  position: absolute;
  right: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 4px;
}

.current-playback-progress2:after {
  content: ' ';
  position: absolute;
  right: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  background-color: red;
  border-radius: 7px;
}

.ctime,
.etime {
  font-size: 12px;
  color: #666;
}
</style>
